<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
    </style>
</head>
<style>

    body{
        padding-top: 20px;
    }
    .picture_wall{
        display: flex;
        /* 横着排列 */
        flex-direction: row;
        overflow-y: scroll;
        white-space: nowrap;
        /* height: 400px; */
        padding-top: 60px;
        padding-bottom: 60px;
        box-sizing: border-box;
    }
    /* 展示少的时候用width，多的时候用padding 。服了 */
    .picture_wall_item{
        font-size: 10px;
        padding: 5px 90px;
        height: 300px;
        width: 100px;
        box-sizing: border-box;
        border-radius: 10px;
        background-color: rgb(230, 220, 220);
        margin: 30px;
        display: inline;
    }
    /* .picture_wall_item_main:before{
      
               content: "";
               width: 0px;
               height: 0px;
               border-top: 40px solid #ea2828;
               border-bottom: 40px solid transparent;
               border-left: 40px solid  transparent ;
               border-right: 40px solid#ea2828;
               position: absolute;
               top: 0px;
               left: calc(100% - 80px);
               border-radius: 3px;
    } */
    .picture_wall_item_main{
        transform: scale(1.3);
        opacity: 1 !important;
        /* flex:1; */
    }
    .picture_wall_item_other{
        opacity: 0.4;
    }

    .picture_wall::-webkit-scrollbar {
        display: none;
    }

</style>
<body>
    <h1>test</h1>


    <div class="picture_wall">
        
        <div class="picture_wall_item picture_wall_item_other" index="0">
       
            <div>2</div>
            <div>2</div>
            <div>2</div>
            <div>2</div>
            <div>2</div>
            <div>2</div>
        </div>
        <div class="picture_wall_item picture_wall_item_other picture_wall_item_main " index="1">
            
            
        </div>
        
        <div class="picture_wall_item picture_wall_item_other" index="2">2</div>
        <div class="picture_wall_item picture_wall_item_other" index="3">3</div> 
        <div class="picture_wall_item picture_wall_item_other" index="4">4</div>
        <div class="picture_wall_item picture_wall_item_other" index="5">5</div>
        
    </div>


    <script>
        try{
            function switchIndex(index){
            let element =document.querySelector(".picture_wall")
            // document.querySelector(".picture_wall").scrollLeft =(element.children[2].offsetLeft-element.children[0].offsetLeft+2*element.children[0].offsetWidth)/2
            let origin = document.querySelector(".picture_wall").scrollLeft
            // 重要：这里可能会有报错
            let target = (element.children[index]?.offsetLeft)+element.children[index].offsetWidth/2 - window.innerWidth/2
            if(target-origin>0){
                for(let i = origin;i!=target;target-origin>0?i++:i--){
                    setTimeout((i)=>{
                        console.log(i)
                        document.querySelector(".picture_wall").scrollLeft = i
                    },i*0.5,i)
                }
            }else{
                for(let i = origin;i!=target;i--){
                    setTimeout((i)=>{
                        console.log(i)
                        document.querySelector(".picture_wall").scrollLeft = i
                    },i*(-0.8),i)
                }
            }
            
            // document.querySelector(".picture_wall").scrollLeft =(element.children[index].offsetLeft)+element.children[index].offsetWidth/2 - window.innerWidth/2
            // picture_wall_item_main
        }
        let index =2
        switchIndex(1)
        let oDiv = document.querySelector('.picture_wall')
        oDiv.addEventListener('wheel',(e)=>{
            e.preventDefault()
        })
        // 移动端阻止
      
        let main = document.querySelector(".picture_wall")
        oDiv.addEventListener('touchstart',(e)=>{
            switchIndex(e.target.getAttribute("index"))
            if (JSON.stringify(e.target.classList).match(/picture_wall_item/)) {
                Array.from(main.children).forEach((e) => {
                    e.classList.remove("picture_wall_item_main")
                    
                })
                // e.target.classList.remove("picture_wall_item_other")
                e.target.classList.add("picture_wall_item_main")
            }
            // console.log(e)
            e.preventDefault()
        })

        }catch(e){
            console.log(e)
        }
        
    </script>
</body>
</html>